<script setup>
import CheckBox from "./Checkbox.vue";
import { defineProps, ref, watch } from "vue";
const props = defineProps({
  bodyType: {
    type: String,
    default: "",
  },

  gender: {
    type: String,
    default: "女",
  },
});
const imageUrl = ref("");
const jsonWoman = ref([
  {
    value: "苹",
    type: "苹果型(O型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753325126711833.png"
  },

  {
    value: "梨",
    type: "梨型(A型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753325141105794.png"
  },

  {
    value: "沙",
    type: "沙漏型(X型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753325153784393.png"
  },

  {
    value: "倒三角形(T型)",
    type: "倒三角形(T型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753325170869093.png"
  },

  {
    value: "H",
    type: "矩形(H型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753325184784878.png"
  },
]);

const jsonMan = ref([
  {
    value: "苹",
    type: "苹果型(O型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753324878640920.png",
  },

  {
    value: "苹",
    type: "梨型(A型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753324934565088.png",
  },

  {
    value: "H",
    type: "矩形(H型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753324951511967.png"
  },

  {
    value: "倒",
    type: "倒三角形(T型)",
    pic: "https://oss.yz.zglvling.com/user/image/2025-07-24/1753324969423848.png"
  },
]);

const json = ref([]);

watch(
  [() => props.bodyType, () => props.gender],
  ([newVal, gender]) => {
    console.log("props.bodyType newVal: xxxxxxxxxxxxx", newVal);

    json.value = gender === "男" ? jsonMan.value : jsonWoman.value;
    console.log("json.value: ", json.value);

    json.value = json.value.map((item) => ({
      ...item,
      checked: newVal.includes(item.type),
    }));

    imageUrl.value = json.value.find((item) => newVal.includes(item.type))?.pic;
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <view class="container">
    体型：
    <template v-for="item of json">
      <CheckBox :checked="item.checked">{{ item.type }}</CheckBox>
    </template>
    <image class="figure" :src="imageUrl" mode="widthFix"></image>
  </view>
</template>

<style scoped>
.container {
  padding: 20px 26px;
}
.figure {
  margin-top: 26px;
  margin-bottom: 12px;
}
</style>
